<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post1</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        /* 样式以便于显示弹窗 */
        #postModal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
            padding-top: 60px;
        }
        #postModalContent {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="layui-panel">
    <div style="padding: 32px;">
        <h2>社区公约：</h2>
        <hr>
        <p>阿巴阿巴</p>
    </div>

</div>
<div class="layui-panel">
    <div style="padding: 32px;">
        <h2>通知：</h2>
        <hr>
        <p>阿巴阿巴回复了你的消息</p>
    </div>

</div>
<div class="layui-panel">
    <div style="padding: 32px;">
        <h2>端午活动：</h2>
        <hr>
        <p>端午节快乐！</p>
    </div>

</div>
<div id="postsContainer" class="layui-panel">
    <h2>社区内容</h2>
    <div id="postsList"></div>
</div>
<div id="dg" style="z-index: 9999; position: fixed ! important; right: 0px; bottom: 0px;">
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" style="color: white" id="postButton"><span>我要发帖</span></button>
    </div>
    <div id="postModal">
        <div id="postModalContent">
            <span class="close">&times;</span>
            <h2>发帖：</h2>
            <hr>
            <form id="postForm">
                <label for="title">标题:</label><br>
                <input type="text" id="title" name="title" class="layui-input" required><br><br>
                <label for="contenttext">内容:</label><br>
                <textarea id="contenttext" name="contenttext" rows="4" cols="50" class="layui-textarea" required></textarea><br><br>
                <button type="submit" class="layui-btn layui-bg-blue">提交</button>
            </form>
        </div>
    </div>
</div>
<script>
    const postButton = document.getElementById('postButton');
    const postModal = document.getElementById('postModal');
    const closeModal = document.getElementsByClassName('close')[0];

    postButton.onclick = function() {
        postModal.style.display = 'block';
    }

    closeModal.onclick = function() {
        postModal.style.display = 'none';
    }

    window.onclick = function(event) {
        if (event.target == postModal) {
            postModal.style.display = 'none';
        }
    }

    document.getElementById('postForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const title = document.getElementById('title').value;
        const contenttext = document.getElementById('contenttext').value;

        fetch('/api/submit_post', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ title, contenttext })
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('提交成功!');
                    postModal.style.display = 'none';
                } else {
                    alert('提交失败!');
                }
            });
    });
    // 获取帖子列表
    function fetchPosts() {
        fetch('/api/posts')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    postsList.innerHTML = ''; // 清空当前的帖子列表
                    data.data.forEach(post => {
                        const postElement = document.createElement('div');
                        postElement.classList.add('layui-panel');
                        postElement.style.padding = '16px';
                        postElement.innerHTML = `
                            <h3>${post.title}</h3>
                            <p>${post.contenttext}</p>
                            <small>${new Date(post.createdAt).toLocaleString()}</small>
                        `;
                        postsList.appendChild(postElement);
                    });
                }
            });
    }
    // 初次加载时获取帖子列表
    fetchPosts();
</script>
</body>
</html>